<template>
  <page-wrap
    :bgColor="dynamicColor"
    txtColor="#222"
    :showTop="false"
    :dark="true"
    back
    hideTab
  >
    <view
      class="simple-career-path-report-detail"
      :style="'padding-top:' + navHeight + 'px;'"
    >
      <view
        class="menu menuFixed"
        :style="'top:' + navHeight + 'px;'"
        v-if="menuTop"
      >
        <u-tabs
          name="title"
          height="64"
          bg-color="transparent"
          font-size="28"
          :current="currentIndex"
          :list="tabsList"
          :active-item-style="activeItemStyle"
          :gutter="24"
          :bar-style="barStyle"
          :inactive-color="'#999999'"
          @change="handleCateClick"
        ></u-tabs>
      </view>
      <scroll-view
        :style="'height: calc(95vh - ' + navHeight + 'px)'"
        :scroll-y="true"
        :class="[menuTop ? 'pt80' : 'pt32']"
        @scroll="watchScroll"
        scroll-with-animation
        :scroll-into-view="simpleCareerScrollDomId"
      >
        <view class="title-box">
          <view class="title"> 职途报告 </view>
          <view class="title-desc"> 为你量身打造的成长指南 </view>
        </view>
        <view class="card-box">
          <view class="left">
            <view class="name-box">
              <image class="avatar" :src="appendixImg" />
              <view class="name">{{ personName }}</view>
              <image
                class="edit-icon"
                :src="editIcon"
                @click="handleEdit"
              ></image>
            </view>
            <view class="position mt52 mb24">求职意向: {{ positionName }}</view>
            <view class="position">专业: {{ major }}</view>
          </view>
          <view class="right">
            <image class="book" :src="careerReportBook" />
            <!-- <view class="btn-box">
              <text class="text">还未领取精英版</text>
              <image class="right-icon" :src="rightIcon"></image>
            </view> -->
          </view>
        </view>
        <view class="menu mt62">
          <u-tabs
            name="title"
            height="64"
            bg-color="transparent"
            font-size="28"
            :list="tabsList"
            :current="currentIndex"
            :active-item-style="activeItemStyle"
            :gutter="24"
            :bar-style="barStyle"
            :inactive-color="'#999999'"
            @change="handleCateClick"
          ></u-tabs>
        </view>
        <view class="card position-intend mb24" id="simpleCareerScrollDomId0">
          <view class="title">{{ positionDescObj.title }}</view>
          <view
            class="content"
            v-for="(item, index) in positionDescObj.positionDataArr"
            :key="index"
          >
            <view v-if="index == 0" class="sub-title-operate mb40 mt64">
              <text class="sub-title">{{ positionName }}</text>
              <view class="icon-box" @click="handleTransfer">
                <image class="icon" :src="transferIcon"></image>
                <text class="icon-desc">切换</text>
              </view>
            </view>
            <view v-else class="sub-title mb24 mt64">{{ item.subTitle }}</view>
            <view :class="[item.isExpanded ? 'desc' : 'clamp-line-5']">{{
              item.desc
            }}</view>
            <view
              class="flod-btn"
              v-if="showToggleButton(item)"
              @click="toggleText(index)"
              >{{ item.isExpanded ? '收起' : '展开' }}</view
            >
          </view>
        </view>
        <view class="card position-nature mb24" id="simpleCareerScrollDomId1">
          <view class="title">{{ natureDescObj.title }}</view>

          <view class="title-desc mt14">{{
            natureDescObj.titleDesc.join('、')
          }}</view>
          <view
            class="content-box"
            v-for="(item, index) in natureDescObj.itemList"
            :key="index"
          >
            <view class="left-title mb24 mt32">{{ item.title }}</view>
            <view
              class="content"
              v-for="(_item, _index) in item.data"
              :key="_index"
            >
              <view class="header">
                <image class="nature-icon" :src="_item.pic"></image>
                <view class="nature-box">
                  <view class="up-title">{{ _item.typeName }}</view>
                  <view class="down-title">{{ _item.name }}</view>
                </view>
              </view>
              <view class="icon-bar">
                <view
                  class="icon-box"
                  v-for="(val, i) in _item.descPic"
                  :key="i"
                >
                  <image class="icon" :src="val.url"></image>
                  <text class="icon-desc">{{ val.label }}</text>
                </view>
              </view>
              <!-- <view class="nature-desc">
                {{ _item.desc }}
              </view> -->
              <view
                :class="[
                  _item.isExpanded ? 'nature-desc' : 'nature-desc-line-5',
                ]"
                >{{ _item.desc }}</view
              >
              <view
                class="flod-btn"
                v-if="showToggleButton(_item)"
                @click="toggleTextNature(index)"
                >{{ _item.isExpanded ? '收起' : '展开' }}</view
              >
            </view>
          </view>
        </view>
        <view class="card chart nopadding" id="simpleCareerScrollDomId2">
          <view class="title">薪酬情况</view>
          <salaryAnalysis
            :currentIndex="currentIndex"
            :title="'薪酬分析'"
            :positionId="positionId"
            :positionName="positionName"
            :personId="personId"
            @regionChange="regionChange"
            :showFilterBox="showFilterBox"
            :currentRegion="currentRegion"
            :hideCharts.sync="hideCharts"
          ></salaryAnalysis>
        </view>
      </scroll-view>
      <!-- <view class="footer" v-if="menuTop">
        <view class="btn" @click="handleSubmit">去领取精英版</view>
      </view> -->
    </view>
    <FilterBox
      ref="filterBox"
      :keywordFromParent="positionName"
      @update="handleFilter($event)"
      :showFilterBox.sync="showFilterBox"
    ></FilterBox>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import { throttle } from 'lodash';
import { getOneRegionAvgSalary } from '@/api/modules/positionDictionary';
import WxLoginMixin from '@/mixins/wxLogin';
import FilterBox from './components/filterBox.vue';
import LoginDialog from '@/components/LoginDialog';
import TabsSwiper from './components/TabsSwiper.vue';
import salaryAnalysis from './components/salaryAnalysis.vue';
import { getReportTab, getReportTabData } from '@/api/modules/career';
export default {
  name: 'simpleCareerPathDetail',
  components: { salaryAnalysis, LoginDialog, TabsSwiper, FilterBox },
  mixins: [WxLoginMixin],
  data() {
    return {
      isExpanded: false, // 默认为false，表示文本是折叠的
      navHeight: getApp().globalData.navHeight,
      appendixImg: this.$imgBaseSelf + 'resume/appendix_new.svg',
      careerReportBook: this.$imgBaseSelf + 'career/careerReportBook.png',
      editIcon: this.$imgBaseSelf + 'career/editIcon.png',
      rightIcon: this.$imgBaseSelf + 'career/rightIcon.png',
      transferIcon: this.$imgBaseSelf + 'career/transferIcon.png',
      dynamicColor: 'transparent',
      shareTitle: '为你量身打造的成长指南', // 分享自定义标题
      sharePath: '/pagesSub/SimpleCareerPathReport/index',

      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      currentRegion: {
        value: '100000',
        label: '全国',
      },
      currentIndex: 0,
      personName: '',
      positionId: '',
      positionName: '',
      major: '',
      showFilterBox: false,
      hideCharts: false,
      tabsList: [],
      tabIdList: [],
      current: 0,
      activeItemStyle: {
        'font-weight': '600',
        color: '#000000',
        'font-size': '32rpx',
      },
      barStyle: {
        width: '20px',
        height: '8px',
        background:
          'linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #F75A3E 100%)',
        'border-radius': '4px',
        left: '0',
        bottom: '0rpx',
      },
      scrollTop: 0,
      navHeight: 0,
      menuTop: false,
      isClickScroll: false,
      isDark: false,
      showTitle: false,
      simpleCareerScrollDomId: '',
      positionDescObj: {
        title: '意向职位概述',
        positionDataArr: [
          {
            subTitle: '前端工程师',
            desc: '',
          },
          {
            subTitle: '工作任务',
            desc: '',
          },
          { subTitle: '适合的行业', desc: '' },
          {
            subTitle: '适合的专业',
            desc: '',
          },
        ],
      },
      natureDescObj: {
        title: '',
        titleDesc: [],
        itemList: [],
      },
    };
  },
  computed: {
    showToggleButton() {
      return (item) => {
        // 计算文本行数，如果超过5行，则showToggle为true
        const lines = Math.ceil(item.desc.length / 25); // 假设每行约50个字符
        return lines > 5;
      };
    },
  },
  async onLoad(opt) {
    this.personName = opt.personName;
    this.major = opt.major;
    this.positionId = opt.positionId;
    this.positionName = opt.positionName;
    this.navHeight = getApp().globalData.navHeight - 5;
    if (!this.personId) {
      this.showLoginDialog();
    }
    this.freshData();
    await this.getReportTabFn();
    await this.getReportTabDataFn();
  },
  methods: {
    toggleText(index) {
      this.$set(this.positionDescObj.positionDataArr, index, {
        ...this.positionDescObj.positionDataArr[index],
        isExpanded: !this.positionDescObj.positionDataArr[index].isExpanded,
      });
      this.$forceUpdate(); // 强制更新视图
    },
    toggleTextNature(index) {
      this.$set(this.natureDescObj.itemList[0].data, index, {
        ...this.natureDescObj.itemList[0].data[index],
        isExpanded: !this.natureDescObj.itemList[0].data[index].isExpanded,
      });
      this.$forceUpdate(); // 强制更新视图
    },
    async getReportTabFn() {
      const res = await getReportTab();
      if (res.code == 200) {
        const tabListTemp = [],
          tabIdListTemp = [];
        res.data.forEach((item) => {
          tabListTemp.push({
            name: item.tabName,
          });
          tabIdListTemp.push(item.id);
        });
        this.tabsList = tabListTemp;
        this.tabIdList = tabIdListTemp;
      }
    },
    async getReportTabDataFn() {
      const params = {
        id: this.positionId,
        tabIdList: this.tabIdList,
      };
      const res = await getReportTabData(params);
      if (res.code == 200) {
        res.data.forEach((item) => {
          // 处理意向职业概述的逻辑
          if (item.tabId == 1) {
            this.positionDescObj.title = item.subName;
            item.layerData.forEach((_item, _index) => {
              // 处理职位描述的逻辑
              if (_item.layerId == 70) {
                this.positionDescObj.positionDataArr[0].subTitle =
                  this.positionName;
                this.positionDescObj.positionDataArr[0].desc =
                  _item.data.answer.answerContent || '--';
              }
              // 处理工作任务的逻辑
              if (_item.layerId == 6) {
                this.positionDescObj.positionDataArr[1].subTitle = '工作任务';
                this.positionDescObj.positionDataArr[1].desc =
                  _item.data.answer.answerContent || '--';

                // this.positionDescObj.positionDataArr[1].subTitle = "工作任务";
                // let temAnswer = "";
                // _item.data.forEach((__item, __index) => {
                //   if (__index < _item.data.length - 1) {
                //     temAnswer = temAnswer + __item.layerValue + "，";
                //   } else {
                //     temAnswer = temAnswer + __item.layerValue + "。";
                //   }
                // });
                // this.positionDescObj.positionDataArr[1].desc =
                //   temAnswer || "--";
              }
              // 处理适合的行业的逻辑 // TODO:
              // 处理适合的专业的逻辑
              if (_item.layerId == 30) {
                const temp = [];
                this.positionDescObj.positionDataArr[3].subTitle = '适合的专业';
                _item.data.forEach((val) => {
                  temp.push(val.tagName);
                });
                this.positionDescObj.positionDataArr[3].desc = temp.length
                  ? temp.join('、')
                  : '--';
              }
              // 处理 193 行业
              if (_item.layerId == 193) {
                const temp = [];
                this.positionDescObj.positionDataArr[2].subTitle = '适合的行业';
                _item.data.forEach((val) => {
                  temp.push(val.keyName);
                });
                this.positionDescObj.positionDataArr[2].desc = temp.length
                  ? temp.join('、')
                  : '--';
              }
            });
          }
          // 处理职业性格的逻辑
          if (item.tabId == 2) {
            this.natureDescObj.title = item.subName;
            this.natureDescObj.itemList = item.layerData;
            // 切换以后置空
            let tempTitleDesc = [];
            item.layerData.forEach((_item, _index) => {
              _item.data.forEach((val) => {
                tempTitleDesc.push(val.typeName);
                // this.natureDescObj.titleDesc.push(val.typeName);
              });
            });
            this.natureDescObj.titleDesc = tempTitleDesc;

            this.natureDescObj.itemList.forEach((item, index) => {
              item.data.forEach((_item) => {
                _item.isExpanded = false;
              });
            });
          }
          // 薪酬数据是使用现有的组件，不需要在此处理数据
          this.positionDescObj.positionDataArr.forEach((item) => {
            item.isExpanded = false;
            item.showToggle = false;
          });
          console.log(
            'this.positionDescObj.positionDataArr',
            this.positionDescObj.positionDataArr
          );
        });
      }
    },
    //切换职业之后触发的方法
    handleFilter(data) {
      this.showFilterBox = false;
      this.positionName = data.tagTitle;
      this.positionId = data.positionId;
      this.positionDescObj.positionDataArr[0].subTitle = this.positionName;
      this.getReportTabDataFn();
      this.freshData();
    },
    handleTransfer() {
      this.showFilterBox = true;
      this.$nextTick(() => {
        this.$refs.filterBox.init();
      });
    },
    handleEdit() {
      uni.navigateBack();
    },
    async loginSuccessBack() {
      await this.getReportTabFn();
      await this.getReportTabDataFn();
    },
    watchScroll: throttle(function (e) {
      if (this.isClickScroll) {
        this.isClickScroll = false;
        return;
      }
      let top = e.detail.scrollTop;
      this.scrollTop = top;
      if (top > 50) {
        this.isDark = false;
      } else {
        this.isDark = true;
      }
      uni
        .createSelectorQuery()
        .selectAll('.card')
        .boundingClientRect((rects) => {
          if (rects[0].top < 120) {
            this.menuTop = true;
          } else {
            this.menuTop = false;
          }
          for (let i = 0; i < rects.length; i++) {
            if (rects[i].top < 140) {
              this.currentIndex = i;
            } else {
              return;
            }
          }
        })
        .exec();
    }, 100),
    handleCateClick(index) {
      this.isClickScroll = true;
      this.showTitle = true;
      this.isDark = false;
      this.currentIndex = index;
      this.menuTop = true;
      //这一步为了解决scroll-view bug，上拉顶部有时候不滚动，会失效的问题
      // if (this.scrollTop < this.positionInfoHeight) {
      //给个随意值，防止不滚动更新scrollTop直接点击tab闪动
      // this.scrollTop = 100;
      this.simpleCareerScrollDomId = '0';
      setTimeout(() => {
        console.log(
          'this.simpleCareerScrollDomId',
          this.simpleCareerScrollDomId
        );
        this.simpleCareerScrollDomId = 'simpleCareerScrollDomId' + index;
      }, 50);
      // }
    },
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    //切换城市
    regionChange(region) {
      this.currentRegion = region;
      this.freshData();
    },
    freshData() {
      const params = `positionId=${this.positionId}&positionName=${this.positionName}&regionId=${this.currentRegion.value}&regionName=${this.currentRegion.label}&parentTitle=${this.parentTitle}&topTitle=${this.topTitle}`;
      this.sharePath = '/pagesSub/SimpleCareerPathReport/index?' + params;
      this.reqGetOneRegionAvgSalary();
    },
    reqGetOneRegionAvgSalary() {
      const params = {
        id: this.positionId,
        regionIds: this.currentRegion.value || '',
      };
      getOneRegionAvgSalary(params)
        .then((res) => {
          if (res.code == 200) {
            this.regionAvgSalaryInfo = res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    showLoginDialog() {
      this.hideCharts = true;
      this.$refs.loginDialog.setVisibility(true);
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base: $img-base;

::v-deep .u-tabs {
  padding-bottom: 20rpx;
}

.simple-career-path-report-detail {
  height: 90vh;
  padding: 0 24rpx;
  background-color: #fdfeff;
  color: $uni-text-color-333;
  position: relative;
  // padding-bottom: calc(42rpx + constant(safe-area-inset-bottom));
  // padding-bottom: calc(42rpx + env(safe-area-inset-bottom));
  background-color: #f3f5f8;
  background-image: url($img-base + 'career/simpleCareerPathBg.png');
  background-size: 100% 60%;
  background-repeat: no-repeat;
  // overflow: hidden;

  .title-box {
    // margin: 0 24rpx;
    padding: 0 24rpx;
    margin: 0 0 42rpx 0;
    .title {
      font-size: 48rpx;
      font-weight: 600;
      color: #222;
    }
    .title-desc {
      font-size: 28rpx;
      color: #333;
      margin-top: 18rpx;
    }
  }

  .card-box {
    // margin: 0 24rpx;
    padding: 32rpx 28rpx 28rpx 32rpx;
    display: flex;
    justify-content: space-between;
    position: relative;
    background: #ffffff;
    border-radius: 32rpx;
    .left {
      .name-box {
        display: flex;
        align-items: center;
        .avatar {
          width: 64rpx;
          height: 64rpx;
          border-radius: 50%;
          margin-right: 26rpx;
        }
        .name {
          font-size: 36rpx;
          color: #000000;
        }
        .edit-icon {
          padding: 0 20rpx 0 18rpx;
          width: 28rpx;
          height: 28rpx;
          margin-top: 6rpx;
        }
      }
      .position {
        font-weight: 400;
        font-size: 26rpx;
        color: #888888;
        width: 385rpx;
      }
      .mt52 {
        margin-top: 52rpx;
      }
      .mb24 {
        margin-bottom: 24rpx;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      .book {
        position: absolute;
        right: 52rpx;
        top: -100rpx;
        width: 302rpx;
        height: 266rpx;
      }
      .btn-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ff711e;
        border-radius: 28rpx;
        height: 56rpx;
        line-height: 56rpx;
        padding: 0 24rpx 0 34rpx;
        .text {
          font-size: 24rpx;
          color: #ffffff;
          margin-right: 16rpx;
        }
        .right-icon {
          width: 16rpx;
          height: 16rpx;
        }
      }
    }
  }

  .menu {
    width: calc(100% - 48rpx);
    background: transparent;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
  }

  .menuFixed {
    position: fixed;
    z-index: 999;
  }

  .card {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 32rpx;
    .title {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      font-size: 30rpx;
      color: #000000;
      text-align: center;
    }
    .title-desc {
      font-size: 28rpx;
      color: #888888;
      text-align: center;
    }
    .content {
      &:not(:last-child) {
        margin-bottom: 68rpx;
      }
      .sub-title-operate {
        display: flex;
        align-items: center;
        .sub-title {
          font-size: 32rpx;
          color: #000000;
        }
        .icon-box {
          display: flex;
          align-items: center;
          .icon {
            width: 28rpx;
            height: 28rpx;
            padding: 0 12rpx 0 16rpx;
          }
          .icon-desc {
            font-size: 28rpx;
            color: #aaaaaa;
          }
        }
      }
      .sub-title {
        font-size: 32rpx;
        color: #000000;
      }
      .desc,
      .clamp-line-5 {
        font-size: 28rpx;
        color: #666666;
        line-height: 42rpx;
      }
      .clamp-line-5 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
      }
      .flod-btn {
        // color: #bdc6d9;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        margin-top: 8rpx;
      }
    }
  }
  .nopadding {
    padding: 0;
    padding-top: 32rpx;
  }
  .pt32 {
    padding-top: 32rpx;
  }
  .pt80 {
    padding-top: 80rpx;
  }
  .mt14 {
    margin-top: 14rpx;
  }
  .mt32 {
    margin-top: 32rpx;
  }
  .mt62 {
    margin-top: 62rpx;
  }
  .mt64 {
    margin-top: 64rpx;
  }
  .mb24 {
    margin-bottom: 24rpx;
  }
  .mb40 {
    margin-bottom: 40rpx;
  }

  .position-nature {
    .left-title {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 30rpx;
      color: #000000;
      margin-bottom: 12rpx;
    }
    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 24rpx;
      .nature-icon {
        width: 106rpx;
        height: 110rpx;
        margin-right: 18rpx;
      }
      .nature-box {
        .up-title {
          font-weight: 800;
          font-size: 30rpx;
          color: #000000;
        }
        .down-title {
          font-size: 26rpx;
          color: #000000;
          font-weight: 800;
        }
      }
    }
    .icon-bar {
      display: flex;
      justify-content: space-around;
      margin-top: 40rpx;
      .icon-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .icon {
          width: 96rpx;
          height: 96rpx;
          border-radius: 50%;
          margin-bottom: 18rpx;
        }
        .icon-desc {
          font-size: 28rpx;
          color: #333333;
        }
      }
    }
    .nature-desc,
    .nature-desc-line-5 {
      font-size: 26rpx;
      color: #666666;
      margin-top: 30rpx;
      line-height: 42rpx;
    }
    .nature-desc-line-5 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      overflow: hidden;
    }
  }

  .footer {
    width: 100%;
    height: 80rpx;
    position: fixed;
    bottom: calc(36rpx + constant(safe-area-inset-bottom));
    bottom: calc(36rpx + env(safe-area-inset-bottom));
    .btn {
      width: calc(100% - 48rpx);
      border-radius: 12rpx;
      background: #f75a3e;
      color: #fff;
      text-align: center;
    }
  }
}
</style>
